<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 示例</title>
</head>
<body>
<div id="helloDiv">
    <div>
        <input type="text" v-model="name" placeholder="你的名字">
        <h1>你好，{{ name }}</h1>
    </div>


    <!-- {{}}中使用运算符 -->
    <div>
        <input type="text" v-model="number1" placeholder="请输入被除数">
        <input type="text" v-model="number2" placeholder="请输入除数">
        {{ number1 / number2 }}
    </div>

</div>


<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
    let data =
        {
            name: '',
            number: 10,
            number2: '',
            number1: ''
        }

    let app = new Vue({
        // el: '#helloDiv', //el用于指定一个页面中已经存在的DOM元素来挂载vue实例，它可以是HTMLElement,也可以是CSS选择器#helloDiv
        el: document.getElementById('helloDiv'), //HTMLElement 方式
        data: data, // data 也可以指向一个定义好的变量
        created() { //实例创建完成后调用，此阶段完成了数据的观测等。但尚未挂载，$el还不可用。需要初始化处理一些数据时可能会用到这个地方。
            console.log("create" + this.name)
            this.name = "liqinchun"
            console.log("create" + this.name)
        },
        mounted() { //el挂载示例后调用，一般我们的第一个业务逻辑会在这里开始。
            console.log("mounted" + this.name)
        },
        beforeDestroy() { //实例销毁之前调用，主要解绑一些使用addEventListener监听的事件等。
            console.log("beforeDestroy" + this.name)
        }
    })
    console.log("init name: " + app.name)
</script>

</body>
</html>